<template>
 <div class="user_content">
      <el-form
        :model="user"
        ref="user"
        label-width="100px" class="demo-ruleForm">

        <el-form-item label="id" prop="id">
          <el-input type="text" v-model="user.id"></el-input>
        </el-form-item>

        <el-form-item label="用户名" prop="name">
          <el-input type="text" v-model="user.name"></el-input>
        </el-form-item>

        <el-form-item label="年龄" prop="age">
          <el-input type="text" v-model="user.age"></el-input>
        </el-form-item>

         <el-form-item label="邮箱" prop="email">
          <el-input type="text" v-model="user.email"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button @click="updateUser(user)" type="primary">修改</el-button>
        </el-form-item>
      </el-form>
    </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js,第三方插件js,json文件，图片文件等等）
//例如： import <<组件名称>> from '<<组件路径>>' ;

export default {
  //import 引入的组件需要注入到对象中才能使用
  components: {},
  props: {},
  data() {
    //这里存放数据
    return {
        // user: this.$route.row,
      user: {
        id: this.$route.params.id,
        name: "",
        age: "",
        email: "",
      },
      isSuccess: ""
    };
  },
  //计算属性 类似于data概念
  computed: {},
  //监控data 中的数据变化
  watch: {},
  //方法集合
  methods: {
    updateUser(user) {
      //   console.log(user);
      // 发送ajax请求更新数据
      // this.axios.put("http;//localhost:8088/user/update?user="+user)
      this.axios({
        method: "post",
        url: "http://localhost:9000/user/update",
        data: {
          id: user.id,
          name: user.name,
          age: user.age,
          email:user.email
        }
      })
        .then(response => {
          console.log(response);
          this.isSuccess = response.data.data;
          if (response.data.data != true && response.data.code != 200) {
            alert("更新失败");
            // 跳转到错误页面
            this.$router.push("/fal");
          } else {
            alert("更新成功");
          }
        })
        .catch(res => {
          // 跳转到错误页面
          this.$router.push("/fal");
        });

      // 跳转到列表页面
      this.$router.push("/Home");
    }
  },
  //生命周期 -创建完成 （可以访问当前this 实例）
  created() {},
  //生命周期-挂载完成（可以访问DOM 元素）
  mounted() {

      console.log(this.user.id+"id");

      this.axios.get("http://localhost:9000/user/getOne?id="+this.user.id).then(response => {
      console.log(response.data.data);
      this.user = response.data.data;
      // console.log(this.tableData)
    });

  },
  beforeCreate() {}, //生命周期 -创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 -更新之后
  beforeDestroy() {}, //声明周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {} // 如果页面有keep-alive 缓存功能 这个函数会触发
};
</script>
<style scoped>
/*@import url();引入公共css类*/
</style>